<template>
  <div class="address">
    <van-nav-bar title="收货地址" left-arrow
                 @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="22" color="#6A6A6A"/>
      </template>
    </van-nav-bar>
    <div class="abc">
      <div class="address-conter" v-for="item,index in dataArr" :key="item.id">
        <div class="conter-top">
          <h1>{{item.name}}</h1>
          <div class="pro">
            <p>{{item.phone}}</p>
            <h2 v-show="item.checked===true">[默认]</h2>
          </div>
          <h3 @click="sc(index)">删除</h3>
        </div>
        <div class="conter-bottom">
          <div class="list">
            <p>{{item.address_region}}</p>
            <p>{{item.address_info}}</p>
          </div>
          <van-icon name="arrow" size="20" style="margin-top:0.25rem" ></van-icon>
        </div>
      </div>
    </div>
      <router-link to="/saveress">
        <van-button type="primary" size="large" color="#FF6700">新增地址</van-button>
      </router-link>
</div>
</template>

<script>
import Vue from 'vue'
import { Dialog, Toast } from 'vant'

// 全局注册
Vue.use(Dialog)
export default {
  name: 'Address',
  data () {
    return {
      dataArr: [],
      arr: []
    }
  },
  methods: {
    onClickLeft () {
      this.$router.push('/mine')
    },
    onClickRight () {

    },
    addData () {
      this.dataArr = JSON.parse(localStorage.getItem('arr'))
    },
    sc (i) {
      this.arr = JSON.parse(localStorage.getItem('arr'))
      this.arr = this.arr.filter((item, index) => {
        return index !== i
      })
      Dialog.confirm({
        message: '确定要删除吗？'
      })
        .then(() => {
          localStorage.setItem('arr', JSON.stringify(this.arr))
          this.dataArr = this.arr
          Toast.success('删除成功')
          // on confirm
        })
        .catch(() => {
          // on cancel
        })
    }

  },
  created () {
    this.addData()
    this.$axios.get('https://www.fastmock.site/mock/b915f3539d4f56f3cc303f7b784f2619/xiaomi/api/address')
      .then(res => {
        this.arrs = res.data
      })
  }
}
</script>

<style scoped lang="less">
.address{
  width: 100%;
  height: 100vh;
  position: absolute;
  background: #ffff;
  z-index: 1000;
}
/deep/.van-nav-bar .van-icon{
    color: #6A6A6A;
  }
/deep/.van-nav-bar{
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #F2F2F2;
}
  /deep/.van-nav-bar__arrow{
    font-size: .35rem;
  }
  .address-conter{
    width: 90%;
    height:1.92rem;
    border: 2px solid #EEEEEE;
    margin-left: 5%;
    margin-top: .2rem;
    .conter-top{
      width: 95%;
      height: 50%;
      margin-left: 5%;
      border-bottom: 1px solid #EEEEEE;
      margin-left: 0.1rem;
      display: flex;
      font-size: 0.3rem;
      justify-content: space-around;
      h1{
        font-size: 0.28rem;
        color: #FF6600;
        line-height: 1rem;
        width: 1.4rem;
      }
      h2{
        color: #FF6600;
        font-size: 0.2rem;
        line-height: 1rem;
        margin-left:  0.1rem;
      }
      p{
        line-height: 1rem;
      }
      h3{
        color: #A2A2A2;
        font-size: 0.28rem;
        line-height: 1rem;
      }
      .pro{
        display: flex;
      }
    }
  }
  .conter-bottom{
    display: flex;
    justify-content: space-between;
    .list{
     p {
       margin-top: 0.05rem;
       font-size: 0.24rem;
       color: #444444;
       margin-left: 0.3rem;
     }
      .icon{
        margin-top: 0.4rem;
    }

  }/deep/.van-icon{
     margin-right: 0.2rem;}
}
/deep/.van-button--large{
    position: fixed;
    bottom:0;
    left: 0;
  }
.abc{
  margin-top: 1rem;
  margin-bottom: 1rem;
}
  .pro{
    width: 2.5rem;
  }
</style>
